<template>
	<div>
		<ul class="list" v-scroll="onScroll" ref="list">
			<li v-for="item in items" :keys="item.id">{{ item }}</li>
		</ul>
	</div>
</template>

<script>
export default {
	data() {
		return {
			items: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
		}
	},
	components: {

	},
	mounted() {
		this.onScroll()
	},
	methods: {
		fetchData() {
			setTimeout(() => {
				const newItems = ['a', 'b', 'c']
				this.items.push(...newItems)
			}, 1000)
		},
		onScroll() {
			const list = this.$refs.list
			setInterval(() => {
				list.scrollTop++
				console.log(list.scrollTop);
				if (list.scrollTop + list.clientHeight >= list.scrollHeight) {
					this.items.push(...this.items)
				}
				console.log(this.items);
			}, 50)
		}
	},
}

</script>
<style scoped lang='scss'>
.list {
	height: 100px;
	overflow: hidden;
	overflow-y: scroll;
}
</style>